{extend name="addon/servicer/servicer/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/iconfont.css" />
{/block}
{block name="main"}
<style type="text/css">
	.layui-layout-admin .layui-body div.ns-body-content {
		width: 100%;
		height: 100%;
		min-height: 0;
		min-width: 0;
		box-sizing: border-box;
		padding: 0;
	}

	.chat-history-box {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.chat-history-box .history-person {
		width: 240px;
		height: 100%;
		border-right: 1px solid #E5E5E5;
	}

	.history-person .title {
		width: 100%;
		height: 53px;
		background: #f3f3f3;
		padding: 0 10px;
		box-sizing: border-box;
		line-height: 53px;
		border-bottom: 1px solid #e5e5e5;
	}

	.history-person .flow-default {
		width: 100%;
		height: 100%;
		background: #ffffff;
		overflow: scroll;
	}

	.history-person .flow-default::-webkit-scrollbar {
		display: none;
	}

	.history-person .flow-default li {
		width: 100%;
	}

	.history-person .flow-default li .content-people {
		width: 100%;
		height: 70px;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30px 0 15px;
		box-sizing: border-box;
		border-bottom: 1px solid #e5e5e5;
		cursor: pointer;
	}

	.history-person .flow-default li .content-people img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.history-person .flow-default li .content-people .people-info {
		width: calc(100% - 40px);
		height: 100%;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}

	.history-person .flow-default li .content-people .people-info .name {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.history-person .flow-default li .content-people .people-info .name .left {
		font-size: 14px;
		max-width: calc(100% - 50px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.history-person .flow-default li .content-people .people-info .name .right {
		font-size: 12px;
		color: #838383;
	}

	.history-person .flow-default li .content-people .people-info .message {
		width: calc(100% - 10px);
		font-size: 12px;
		color: #838383;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 5px;
	}

	.chat-history-box .chat-content {
		width: calc(100% - 240px);
		overflow: hidden;
	}

	.chat-content .header {
		width: 100%;
		height: 53px;
		display: flex;
		align-items: flex-end;
		overflow-x: scroll;
		border-bottom: 1px solid #E5E5E5;
		box-sizing: border-box;
	}

	.chat-content .header .chat-people {
		display: inline-block;
		padding: 6px 12px;
		background: #F3F3F3;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
		position: relative;
	}

	.chat-content .header .chat-people .chat-people-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.chat-content .header .chat-people.active {
		background: #ffffff;
		border-bottom: 1px solid #ffffff;
	}

	.chat-content .header .chat-people .name {
		max-width: 70px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.chat-content .header .chat-people .close {
		background: #f5f5f5;
		border-radius: 50%;
		padding: 3px;
		color: red;
		margin-left: 6px;
	}

	.chat-content .header::-webkit-scrollbar {
		display: none;
	}


	.chat-content .chat-content-box {
		width: 100%;
		height: calc(100% - 53px);
		padding: 0 30px 0 15px;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	/* .chat-content .chat-content-box::-webkit-scrollbar {display: none;} */
	.chat-content .chat-content-box .chat-massage-box {
		width: 100%;
		background: #ffffff;
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
	}

	.chat-content .chat-content-box .chat-massage-box.active {
		width: 100%;
		background: #ffffff;
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
		flex-direction: row-reverse;
	}

	.chat-content .chat-content-box .chat-massage-box.active .name {
		text-align: right;
	}

	.chat-content .chat-content-box .chat-massage-box:last-child {
		margin-bottom: 20px;
	}

	.chat-content .chat-content-box .chat-massage-box img {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.chat-content .chat-content-box .chat-massage-box .message-info {
		width: 80%;
		padding-left: 10px;
		box-sizing: border-box;
	}

	.chat-content .chat-content-box .chat-massage-box.active .message-info {
		padding-right: 10px;
	}

	.chat-content .chat-content-box .chat-massage-box .message-info .name {
		color: #4685FD;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.chat-content .chat-content-box .chat-massage-box .message-info .name.active {
		color: #3DB272;
	}

	.chat-content .chat-content-box .chat-massage-box .message-info .message {
		font-size: 12px;
	}

	.chat-content .chat-content-box .chat-massage-box.active .message-info .message {
		font-size: 12px;
		text-align: right;
	}




	/* 组件样式 */
	.goods-info-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
		padding: 10px 15px;
		border-radius: 10px;
		width: 240px;
		height: 300px;
	}

	.goods-info-box img {
		width: 200px;
		height: 200px;
	}

	.goods-info-box .goods-price {
		width: 200px;
		line-height: 35px;
		color: red;
		font-size: 16px;
	}

	.goods-info-box .goods-name {
		width: 200px;
		font-size: 14px;
		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods-info-box .goods-desc {
		width: 200px;
		font-size: 12px;
		margin-top: 5px;
		color: #838383;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.order-box {}

	.order-info-title {
		width: 100%;
		line-height: 50px;
		font-size: 14px;
		text-align: center;
	}

	.order-info-box {
		display: flex;
		align-items: center;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
		padding: 10px 15px;
		border-radius: 10px;
	}

	.order-info-box img {
		width: 90px;
		height: 90px;
	}

	.order-info-box .order-info {
		width: 200px;
		margin-left: 10px;
		height: 90px;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.order-info-box .follow-color {
		color: red;
	}

	.message .goods-info-box {
		width: 250px;
		float: left;
		text-align: left;
	}

	.active .message .goods-info-box {
		width: 250px;
		float: right;
		text-align: left;
	}

	.message .goods-info-box img {
		width: 200px !important;
		height: 200px !important;
	}

	.goods-info-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
		padding: 10px 15px;
		border-radius: 10px;
	}

	.goods-info-box img {
		width: 200px;
		height: 200px;
	}

	.goods-info-box .goods-price {
		width: 200px;
		line-height: 35px;
		color: red;
		font-size: 16px;
	}

	.goods-info-box .goods-name {
		width: 200px;
		font-size: 14px;
		font-weight: 600;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods-info-box .goods-desc {
		width: 200px;
		font-size: 12px;
		margin-top: 5px;
		color: #838383;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.message .order-info-box {
		display: flex;
		align-items: center;
		border: 1px solid #E5E5E5;
		box-sizing: border-box;
		padding: 10px 15px;
		border-radius: 10px;
		margin-top: 10px;
	}

	.message .order-info-box img {
		width: 90px;
		height: 90px;
	}

	.message .order-info-box .order-info {
		width: 200px;
		margin-left: 10px;
		height: 90px;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}

	.message .order-info-box .follow-color {
		color: red;
	}
	.no-servicer{
		width: 100%;
		height: calc(100% - 53px);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.message-info .message .stringMessage img{display: inline-block;width: 20px;height: 20px;}
</style>
<div class="chat-history-box">
	<div class="history-person">
		<div class="title">历史联系人</div>
		<ul class="flow-default" id="LAY_demo1">
			<li>
				<div class="content-people" v-for="(item,index) in offlineMembers" :key="index" @click="openChat(item)">
					<img :src="item.headimg" onerror=src="SERVICER_IMG/default_headimg.png">
					<div class="people-info">
						<div class='name'>
							<div class="left">
								{{item.member_name}}
							</div>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="chat-content">
		<div class="header">
			<div class="chat-people" :class="item.select?'active':''" @click="selectTab(item)" v-for="(item,index) in selectMemberList"
			 :key="index">
				<div class="chat-people-box">
					<div class='name'>
						{{item.member_name}}
					</div>
					<div class="close iconfont iconclose" @click="closeChat(item,index)"></div>
				</div>
			</div>
		</div>
		<div class="no-servicer" v-show="!selectMemberList.length">
			<img src="SERVICER_IMG/no_servicer.png" alt="">
		</div>
		<div class="chat-content-box" v-show="selectMemberList.length">
			<div class="chat-content-box-con">
				<div class="chat-massage-box" :class="item.type==1?'active':''" v-for="(item,index) in chatMessageList" :key="index">
					<img :src="shopInfo.logo" v-if="item.type==1" onerror=src="SERVICER_IMG/default_shop.png">
					<img :src="selectMember.headimg" v-else onerror=src="SERVICER_IMG/default_headimg.png">
					<div class="message-info">
						<div class='name'>
							<span>
								{{item.type==1?shopInfo.site_name:selectMember.member_name}}
							</span>
							<span>
								{{item.create_day}} {{item.create_time}}
							</span>
						</div>
						<div class="message">
							<chat-goods v-if="item.goods_sku_id" :sku-id="item.goods_sku_id"></chat-goods>
							<chat-order v-else-if="item.order_id" :order-id="item.order_id"> </chat-order>
							<div class="stringMessage" v-else v-html="item.type==1?dealmessage(item.servicer_say):dealmessage(item.consumer_say)">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function() {
		let height = $('.ns-body-content').height();
		$('.chat-content').css('height', height);
		$('.history-person .flow-default').css('height', (height - 53));
		$('.chat-content .chat-content-box').css('height', (height - 53));
		$(".chat-content-box-con").css('minHeight', (height - 50));
	})


	var goodsTemplate = '<div class="goods-info-box">';
	goodsTemplate += '<img :src="goodsInfo.sku_image">';
	goodsTemplate += '<div class="goods-price">￥{{goodsInfo.price}}</div>';
	goodsTemplate += '<div class="goods-name">{{goodsInfo.sku_name}}</div>';
	goodsTemplate += '<div class="goods-desc">{{goodsInfo.introduction}}</div>';
	goodsTemplate += '</div>';

	Vue.component('chat-goods', {
		props: {
			skuId: {
				type: [Number, String]
			}
		},
		data: function() {
			return {
				goodsInfo: {}
			}
		},
		mounted: function() {
			let that = this;
			$.ajax({
				url: ns.url("servicer://servicer/chat/goodSkuDetial"),
				data: {
					sku_id: that.skuId
				},
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					that.goodsInfo = res.data
					that.goodsInfo.sku_image = ns.img(that.goodsInfo.sku_image);
				}
			});
		},
		template: goodsTemplate
	})

	var orderTemplate = '<div class="order-info-box">';
	orderTemplate += '<img :src="orderInfo.order_goods?orderInfo.order_goods.sku_img:\'\'">';
	orderTemplate += '<div class="order-info">';
	orderTemplate += '<div class="order-No">订单号：<span>{{orderInfo.order_no}}</span></div>';
	orderTemplate += '<div class="order-price">订单金额：<span class="follow-color">￥{{orderInfo.order_money}}</span></div>';
	orderTemplate += '<div class="order-status">';
	orderTemplate += '<span class="follow-color">{{orderInfo.order_status_name}}</span>';
	orderTemplate += '</div>';
	orderTemplate += '</div>';
	orderTemplate += '</div>';

	Vue.component('chat-order', {
		props: {
			orderId: {
				type: [Number, String]
			}
		},
		data: function() {
			return {
				orderInfo: {}
			}
		},
		mounted: function() {
			let that = this;
			$.ajax({
				url: ns.url("servicer://servicer/chat/orderDetail"),
				data: {
					order_id: that.orderId
				},
				dataType: 'JSON',
				type: 'POST',
				success: function(res) {
					if (res.code == 0) {
						that.orderInfo = res.data;
						if (that.orderInfo.order_goods) {
							that.orderInfo.order_goods[0].sku_image = ns.img(that.orderInfo.order_goods[0].sku_image)
						}
					}
				}
			});
		},
		template: orderTemplate
	})


	var vue = new Vue({
		el: ".chat-history-box",
		data: {
			tab_repeat_flag: false,
			shopInfo: {},
			chatPage: {
				currentPage: 1,
				countPage: 1,
				repeat_flag: false
			},

			offlineMembers: [], //下线人数
			onlineMembers: [], //在线人数

			selectMemberList: [], //正在聊天列表

			selectMember: {},

			otherlist: [], //用户的商品或订单信息

			chatMessageList: [] //聊天信息列表
		},
		mounted: function() {
			this.getHistoryMember();
			this.requestChattingPageData(); //给聊天记录绑定上拉滚动事件
			this.findShopInfo();
		},
		computed: {
			numberTotal: function() {
				let num1 = this.offlineMembers ? this.offlineMembers.length : 0;
				let num2 = this.onlineMembers ? this.onlineMembers.length : 0;
				return num1 + num2
			},
			showInfo: function() {
				let obj = {};
				let list = this.otherlist;
				let arr = list.filter(function(v) {
					return v.member_id == this.selectMember.member_id
				})
				if (arr) {
					obj = arr[0]
				}
				return obj
			}
		},
		methods: {
			//获取历史聊天列表
			getHistoryMember() {
				let that = this;
				layui.use('flow', function() {
					var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
					var flow = layui.flow;
					flow.load({
						elem: '#LAY_demo1', //指定列表容器
						scrollElem: '#LAY_demo1',
						isAuto: true,
						mb: 100,
						done: function(page, next) { //到达临界点（默认滚动触发），触发下一页
							var lis = [];
							$.ajax({
								url: ns.url("servicer://servicer/index/historyMembers"),
								data: {
									"page": page
								},
								dataType: 'JSON',
								type: 'POST',
								success: function(res) {
									if (res.code == 0) {
										var arr = res.data.offlineMembers ? res.data.offlineMembers.list : [];
										if (arr) {
											arr.forEach(function(v) {
												v.headimg = ns.img(v.headimg);
												that.offlineMembers.push(v);
											})

										}
										next(lis.join(''), page < 10); //假设总页数为 10
									} else {
										layer.msg(res.msg);
									}
								}
							});
						}
					});
				});
			},
			//查找当前选中的聊天对象
			edit: function() {
				let arr = this.selectMemberList;
				let newArr = [];
				if (arr) {
					newArr = arr.filter(function(v) {
						return v.select == true;
					})
				}
				if (newArr) {
					this.selectMember = newArr[0];
				} else {
					this.selectMember = {};
				}
			},
			//查询店铺信息
			findShopInfo: function() {
				let that = this;
				$.ajax({
					url: ns.url("servicer://servicer/chat/siteInfo"),
					data: {},
					dataType: 'JSON',
					type: 'POST',
					success: function(res) {
						if (res.code == 0) {
							that.shopInfo = res.data.data;
							that.shopInfo.logo = ns.img(that.shopInfo.logo);
						}
					}
				});
			},
			//查询聊天记录
			findChatList: function() {
				let that = this;
				if (that.chatPage.repeat_flag) return;
				if (!that.selectMember || !that.selectMember.member_id) return;
				$.ajax({
					url: ns.url("servicer://servicer/index/dialogs"),
					data: {
						member_id: that.selectMember.member_id,
						page: that.chatPage.currentPage
					},
					dataType: 'JSON',
					type: 'POST',
					success: function(res) {
						that.chatPage.countPage = res.data.page_count;
						that.chatPage.currentPage += 1;
						that.chatPage.repeat_flag = false;
						if (res.code == 0) {
							that.chatMessageList = res.data.list.reverse().concat(that.chatMessageList ? that.chatMessageList : [])
						}
						if(res.data.list.length){
							that.$nextTick(()=>{
								let height=$($(".chat-massage-box")[9])[0].offsetTop
								$(".chat-content .chat-content-box").scrollTop(height)
							})
						}
					}
				});
			},
			requestChattingPageData: function() {
				var that = this;
				$(".chat-content .chat-content-box").scroll(function(event) {
					if (that.chatPage.repeat_flag) return;
					if (event.currentTarget.scrollTop == 0) {
						that.findChatList();
					}
				})
			},
			//点击选中聊天
			openChat: function(e) {
				let obj = e;
				e.select = true;
				let arr = this.selectMemberList;
				if (arr) {
					let hasItem = false;
					arr.forEach(function(v) {
						if (v.member_id == obj.member_id) {
							hasItem = true;
							v.select = true;
						} else {
							v.select = false;
						}
					})
					if (!hasItem) {
						arr.push(obj);
					}
				} else {
					arr.push(obj);
				}

				this.selectMemberList = arr;
				this.chatPage = {
						currentPage: 1,
						countPage: 1,
						repeat_flag: false
					},
					this.chatMessageList = [];
				this.edit();
				this.findChatList();
			},
			// 删除该聊天
			closeChat: function(e, index) {
				let arr = this.selectMemberList;
				if (!e.select) {
					this.selectMemberList = arr.filter(function(v) {
						return v.member_id != e.member_id
					})
					this.edit();
				} else {
					this.selectMemberList = arr.filter(function(v) {
						return v.member_id != e.member_id
					})
					if (this.selectMemberList.length > 0 && index <= this.selectMemberList.length - 1) {
						this.selectMemberList[index].select = true;
					} else if (this.selectMemberList.length > 0 && index > this.selectMemberList.length - 1) {
						this.selectMemberList[this.selectMemberList.length - 1].select = true;
					}
					this.edit();
					this.chatPage = {
							currentPage: 1,
							countPage: 1,
							repeat_flag: false
						},
						this.chatMessageList = [];
					this.findChatList();
				}
			},
			//切换聊天页面
			selectTab: function(item) {
				for (var i = 0; i < this.selectMemberList.length; i++) {
					if (this.selectMemberList[i].id == item.id) {
						this.selectMember = this.selectMemberList[i];
						this.$set(this.selectMemberList[i], 'select', true)
					} else
						this.$set(this.selectMemberList[i], 'select', false)
				}
				this.$forceUpdate();

				this.chatMessageList = [];
				this.chatPage = {
					currentPage: 1,
					countPage: 1,
					repeat_flag: false
				};
				this.findChatList(true);
			},
			//处理表情信息
			dealmessage: function(v) {
				let html = stringToEmjoy(v)
				return html
			},
		}
	});
</script>


{/block}
{block name="script"}
<script>
</script>
{/block}
